<template>
  <div class="w100">
    <el-date-picker
      v-if="!isTimeType"
      v-bind="{ ...item }"
      v-model="changeValue"
      popper-class="t-date-picker"
      :editable="!isMobileTag"
    />
    <el-time-picker
      v-else
      v-bind="{ ...item }"
      v-model="changeValue"
      popper-class="t-date-picker"
    />
  </div>
</template>

<script name="TDateTime" setup>
import dayjs from "dayjs";
import { formEmits, formItemProps, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { computed, onMounted } from "vue";

const props = defineProps({
  ...formItemProps,
  mode: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(formEmits);
const formItemHook = useFormItem(props, emits);
const { changeValue, isMobileTag } = formItemHook;

function dateFormat(fmt, date) {
  const day = dayjs(date);
  return day.format(fmt);
}

const isTimeType = computed(() => {
  return props.item.type === "time";
});

console.log(props.item);

onMounted(() => {
  // models 存在说明为填写页面 表单设计器中无需填充默认值
  if (props.item.config.defaultNowTime && props.mode !== "design" && !props.value) {
    changeValue.value = dateFormat(props.item.format, new Date());
  }
});
</script>
